<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>我的 - 蔬记</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
        
        :root {
            --primary-color: #2ecc71; /* 主色调：绿色（象征种植） */
            --background-color: #f8fff8; /* 页面背景色 - 淡绿色 */
        }
        
        * {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }
        
        body {
            background-color: var(--background-color);
        }
        
        /* 底部导航栏 */
        .tab-bar {
            border-top: 1px solid rgba(0, 0, 0, 0.08);
            background-color: white;
        }
        
        .tab-item.active {
            color: var(--primary-color);
            font-weight: 500;
        }
        
        /* 统计卡片样式 */
        .stat-card {
            border-radius: 16px;
            transition: all 0.3s ease;
        }
        
        .stat-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        
        /* 菜单项样式 */
        .menu-item {
            transition: all 0.2s ease;
        }
        
        .menu-item:active {
            background-color: rgba(0, 0, 0, 0.05);
        }
        
        /* 模态框动画 */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .modal-backdrop {
            animation: fadeIn 0.2s ease;
        }
        
        .modal-content {
            animation: slideUp 0.3s ease;
        }
        
        /* 骨架屏动画 */
        @keyframes shimmer {
            0% { background-position: -200% 0; }
            100% { background-position: 200% 0; }
        }
        
        .skeleton-loading {
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite;
        }
    </style>
</head>
<body class="min-h-screen pb-20">
    <!-- 页面头部 -->
    <header class="sticky top-0 z-10 bg-white shadow-sm">
        <div class="px-4 py-5">
            <h1 class="text-xl font-bold text-gray-800">我的</h1>
            <p class="text-sm text-gray-500">个人设置和种植数据</p>
        </div>
    </header>

    <!-- 主内容区域 -->
    <main class="px-4 py-5">
        <!-- 用户信息卡片 -->
        <div class="bg-white rounded-2xl p-6 mb-6 shadow-sm">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <div class="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center mr-4">
                        <i class="fa fa-user text-2xl text-green-500"></i>
                    </div>
                    <div>
                        <h2 class="text-lg font-semibold text-gray-800">蔬记用户</h2>
                        <p class="text-sm text-gray-500">加入时间: 2024-05-15</p>
                    </div>
                </div>
                <button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200 transition-colors">
                    <i class="fa fa-cog"></i>
                </button>
            </div>
        </div>
        
        <!-- 种植数据统计卡片 -->
        <div class="bg-white rounded-2xl p-6 mb-6 shadow-sm">
            <h3 class="text-base font-medium text-gray-800 mb-4">种植数据</h3>
            <div class="grid grid-cols-2 gap-4">
                <div class="stat-card bg-green-50 p-4 rounded-xl text-center">
                    <div class="text-sm text-gray-500 mb-1">总种植数</div>
                    <div class="text-2xl font-bold text-green-600" id="totalPlants">0</div>
                </div>
                <div class="stat-card bg-blue-50 p-4 rounded-xl text-center">
                    <div class="text-sm text-gray-500 mb-1">正在生长</div>
                    <div class="text-2xl font-bold text-blue-600" id="growingPlants">0</div>
                </div>
                <div class="stat-card bg-yellow-50 p-4 rounded-xl text-center">
                    <div class="text-sm text-gray-500 mb-1">可收获</div>
                    <div class="text-2xl font-bold text-yellow-600" id="readyToHarvest">0</div>
                </div>
                <div class="stat-card bg-purple-50 p-4 rounded-xl text-center">
                    <div class="text-sm text-gray-500 mb-1">收获率</div>
                    <div class="text-2xl font-bold text-purple-600" id="harvestRate">0%</div>
                </div>
            </div>
        </div>
        
        <!-- 功能菜单 -->
        <div class="bg-white rounded-2xl p-2 mb-6 shadow-sm">
            <h3 class="text-sm font-medium text-gray-500 px-4 py-2">种植统计</h3>
            <div class="space-y-1">
                <div class="menu-item flex items-center justify-between px-4 py-3 rounded-xl">
                    <div class="flex items-center">
                        <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-3">
                            <i class="fa fa-calendar text-blue-500"></i>
                        </div>
                        <span class="text-gray-800">种植日历</span>
                    </div>
                    <i class="fa fa-chevron-right text-gray-400"></i>
                </div>
                <div class="menu-item flex items-center justify-between px-4 py-3 rounded-xl">
                    <div class="flex items-center">
                        <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center mr-3">
                            <i class="fa fa-line-chart text-green-500"></i>
                        </div>
                        <span class="text-gray-800">生长趋势</span>
                    </div>
                    <i class="fa fa-chevron-right text-gray-400"></i>
                </div>
                <div class="menu-item flex items-center justify-between px-4 py-3 rounded-xl">
                    <div class="flex items-center">
                        <div class="w-8 h-8 rounded-full bg-orange-100 flex items-center justify-center mr-3">
                            <i class="fa fa-trophy text-orange-500"></i>
                        </div>
                        <span class="text-gray-800">成就记录</span>
                    </div>
                    <i class="fa fa-chevron-right text-gray-400"></i>
                </div>
            </div>
        </div>
        
        <!-- 设置菜单 -->
        <div class="bg-white rounded-2xl p-2 mb-6 shadow-sm">
            <h3 class="text-sm font-medium text-gray-500 px-4 py-2">设置</h3>
            <div class="space-y-1">
                <div class="menu-item flex items-center justify-between px-4 py-3 rounded-xl">
                    <div class="flex items-center">
                        <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center mr-3">
                            <i class="fa fa-bell text-gray-500"></i>
                        </div>
                        <span class="text-gray-800">通知设置</span>
                    </div>
                    <i class="fa fa-chevron-right text-gray-400"></i>
                </div>
                <div class="menu-item flex items-center justify-between px-4 py-3 rounded-xl">
                    <div class="flex items-center">
                        <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center mr-3">
                            <i class="fa fa-language text-gray-500"></i>
                        </div>
                        <span class="text-gray-800">语言设置</span>
                    </div>
                    <i class="fa fa-chevron-right text-gray-400"></i>
                </div>
                <div class="menu-item flex items-center justify-between px-4 py-3 rounded-xl">
                    <div class="flex items-center">
                        <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center mr-3">
                            <i class="fa fa-lock text-gray-500"></i>
                        </div>
                        <span class="text-gray-800">隐私设置</span>
                    </div>
                    <i class="fa fa-chevron-right text-gray-400"></i>
                </div>
            </div>
        </div>
        
        <!-- 支持菜单 -->
        <div class="bg-white rounded-2xl p-2 mb-6 shadow-sm">
            <h3 class="text-sm font-medium text-gray-500 px-4 py-2">支持</h3>
            <div class="space-y-1">
                <div class="menu-item flex items-center justify-between px-4 py-3 rounded-xl">
                    <div class="flex items-center">
                        <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center mr-3">
                            <i class="fa fa-question-circle text-purple-500"></i>
                        </div>
                        <span class="text-gray-800">帮助中心</span>
                    </div>
                    <i class="fa fa-chevron-right text-gray-400"></i>
                </div>
                <div class="menu-item flex items-center justify-between px-4 py-3 rounded-xl">
                    <div class="flex items-center">
                        <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center mr-3">
                            <i class="fa fa-comment text-purple-500"></i>
                        </div>
                        <span class="text-gray-800">反馈建议</span>
                    </div>
                    <i class="fa fa-chevron-right text-gray-400"></i>
                </div>
                <div class="menu-item flex items-center justify-between px-4 py-3 rounded-xl">
                    <div class="flex items-center">
                        <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center mr-3">
                            <i class="fa fa-info-circle text-purple-500"></i>
                        </div>
                        <span class="text-gray-800">关于蔬记</span>
                    </div>
                    <div class="flex items-center text-sm text-gray-500">
                        <span>v1.0.0</span>
                        <i class="fa fa-chevron-right ml-2 text-gray-400"></i>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 清除数据按钮 -->
        <button id="clearDataBtn" class="w-full py-3 text-center text-red-500 bg-red-50 rounded-xl mb-6">
            清除所有数据
        </button>
        
        <!-- 版本信息 -->
        <div class="text-center text-sm text-gray-500 mb-6">
            蔬记 v1.0.0
        </div>
    </main>

    <!-- 底部导航Tab -->
    <nav class="tab-bar fixed bottom-0 left-0 right-0 flex items-center justify-around py-2 border-t border-gray-200 bg-white">
        <a href="home.html" class="tab-item flex flex-col items-center py-2 px-3 text-gray-500">
            <i class="fa fa-home text-lg"></i>
            <span class="text-xs mt-1">首页</span>
        </a>
        <a href="growing-plants.html" class="tab-item flex flex-col items-center py-2 px-3 text-gray-500">
            <i class="fa fa-leaf text-lg"></i>
            <span class="text-xs mt-1">菜园</span>
        </a>
        <a href="task.html" class="tab-item flex flex-col items-center py-2 px-3 text-gray-500">
            <i class="fa fa-tasks text-lg"></i>
            <span class="text-xs mt-1">任务</span>
        </a>
        <a href="stats.html" class="tab-item flex flex-col items-center py-2 px-3 text-gray-500">
            <i class="fa fa-bar-chart text-lg"></i>
            <span class="text-xs mt-1">统计</span>
        </a>
        <a href="#" class="tab-item flex flex-col items-center py-2 px-3 text-primary font-medium" onclick="return false;">
            <i class="fa fa-user text-lg"></i>
            <span class="text-xs mt-1">我的</span>
        </a>
    </nav>

    <!-- 确认对话框 -->
    <div id="confirmModal" class="fixed inset-0 z-50 flex items-center justify-center hidden modal-backdrop">
        <div class="absolute inset-0 bg-black bg-opacity-50"></div>
        <div class="bg-white rounded-2xl p-6 w-4/5 max-w-sm z-10 modal-content">
            <h3 class="text-lg font-semibold text-gray-800 mb-2">确认清除数据</h3>
            <p class="text-sm text-gray-600 mb-6">
                此操作将清除所有种植数据和记录，且不可恢复，确定要继续吗？
            </p>
            <div class="flex space-x-3">
                <button id="cancelClearBtn" class="flex-1 py-2.5 text-center text-gray-600 border border-gray-300 rounded-xl">
                    取消
                </button>
                <button id="confirmClearBtn" class="flex-1 py-2.5 text-center text-white bg-red-500 rounded-xl">
                    确认清除
                </button>
            </div>
        </div>
    </div>

    <!-- 提示消息 -->
    <div id="toastMessage" class="fixed top-20 left-1/2 transform -translate-x-1/2 bg-gray-800 text-white px-4 py-2 rounded-lg shadow-lg hidden z-50">
        <span id="toastText"></span>
    </div>

    <script>
        // 页面加载时初始化
        window.addEventListener('load', initProfilePage);
        
        // 初始化个人中心页面
        function initProfilePage() {
            // 更新统计数据
            updateStatsData();
            
            // 绑定事件
            bindEvents();
        }
        
        // 绑定事件
        function bindEvents() {
            // 清除数据按钮
            const clearDataBtn = document.getElementById('clearDataBtn');
            const confirmModal = document.getElementById('confirmModal');
            const cancelClearBtn = document.getElementById('cancelClearBtn');
            const confirmClearBtn = document.getElementById('confirmClearBtn');
            
            clearDataBtn.addEventListener('click', function() {
                confirmModal.classList.remove('hidden');
            });
            
            cancelClearBtn.addEventListener('click', function() {
                confirmModal.classList.add('hidden');
            });
            
            confirmClearBtn.addEventListener('click', function() {
                clearAllData();
                confirmModal.classList.add('hidden');
            });
            
            // 点击模态框外部关闭
            confirmModal.addEventListener('click', function(e) {
                if (e.target === confirmModal) {
                    confirmModal.classList.add('hidden');
                }
            });
            
            // 菜单项点击事件
            const menuItems = document.querySelectorAll('.menu-item');
            menuItems.forEach(item => {
                item.addEventListener('click', function() {
                    showToast('功能开发中');
                });
            });
        }
        
        // 更新统计数据
        function updateStatsData() {
            // 从localStorage获取种植数据
            let plantedPlants = JSON.parse(localStorage.getItem('plantedPlants')) || [];
            
            // 如果没有数据，使用模拟数据
            if (plantedPlants.length === 0) {
                // 生成模拟种植数据
                plantedPlants = generateMockPlantedPlants();
                localStorage.setItem('plantedPlants', JSON.stringify(plantedPlants));
            }
            
            // 计算统计数据
            const totalPlants = plantedPlants.length;
            const growingPlants = plantedPlants.filter(plant => !plant.harvested).length;
            const readyToHarvestPlants = plantedPlants.filter(plant => isReadyToHarvest(plant)).length;
            const harvestedPlants = plantedPlants.filter(plant => plant.harvested).length;
            const harvestRate = totalPlants > 0 ? Math.round((harvestedPlants / totalPlants) * 100) : 0;
            
            // 更新UI显示
            document.getElementById('totalPlants').textContent = totalPlants;
            document.getElementById('growingPlants').textContent = growingPlants;
            document.getElementById('readyToHarvest').textContent = readyToHarvestPlants;
            document.getElementById('harvestRate').textContent = `${harvestRate}%`;
        }
        
        // 生成模拟种植数据
        function generateMockPlantedPlants() {
            const now = new Date();
            const plants = [
                {
                    id: '1',
                    name: '生菜',
                    type: 'leaf',
                    icon: '🥬',
                    plantedDate: new Date(now.getTime() - 14 * 24 * 60 * 60 * 1000).toISOString(), // 14天前种植
                    expectedHarvestDate: new Date(now.getTime() + 10 * 24 * 60 * 60 * 1000).toISOString(), // 预计10天后收获
                    harvested: false
                },
                {
                    id: '2',
                    name: '西红柿',
                    type: 'fruit',
                    icon: '🍅',
                    plantedDate: new Date(now.getTime() - 21 * 24 * 60 * 60 * 1000).toISOString(), // 21天前种植
                    expectedHarvestDate: new Date(now.getTime() + 20 * 24 * 60 * 60 * 1000).toISOString(), // 预计20天后收获
                    harvested: false
                },
                {
                    id: '3',
                    name: '胡萝卜',
                    type: 'root',
                    icon: '🥕',
                    plantedDate: new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000).toISOString(), // 30天前种植
                    expectedHarvestDate: new Date(now.getTime() + 15 * 24 * 60 * 60 * 1000).toISOString(), // 预计15天后收获
                    harvested: false
                },
                {
                    id: '4',
                    name: '青椒',
                    type: 'fruit',
                    icon: '🫑',
                    plantedDate: new Date(now.getTime() - 45 * 24 * 60 * 60 * 1000).toISOString(), // 45天前种植
                    expectedHarvestDate: new Date(now.getTime() - 5 * 24 * 60 * 60 * 1000).toISOString(), // 5天前收获
                    harvested: true,
                    harvestDate: new Date(now.getTime() - 5 * 24 * 60 * 60 * 1000).toISOString()
                },
                {
                    id: '5',
                    name: '黄瓜',
                    type: 'fruit',
                    icon: '🥒',
                    plantedDate: new Date(now.getTime() - 10 * 24 * 60 * 60 * 1000).toISOString(), // 10天前种植
                    expectedHarvestDate: new Date(now.getTime() + 12 * 24 * 60 * 60 * 1000).toISOString(), // 预计12天后收获
                    harvested: false
                },
                {
                    id: '6',
                    name: '菠菜',
                    type: 'leaf',
                    icon: '🌿',
                    plantedDate: new Date(now.getTime() - 20 * 24 * 60 * 60 * 1000).toISOString(), // 20天前种植
                    expectedHarvestDate: new Date(now.getTime() - 2 * 24 * 60 * 60 * 1000).toISOString(), // 2天前收获
                    harvested: true,
                    harvestDate: new Date(now.getTime() - 2 * 24 * 60 * 60 * 1000).toISOString()
                }
            ];
            
            return plants;
        }
        
        // 判断植物是否可收获
        function isReadyToHarvest(plant) {
            // 如果植物已经收获，返回false
            if (plant.harvested) {
                return false;
            }
            
            // 获取当前日期和预计收获日期
            const now = new Date();
            const expectedHarvestDate = new Date(plant.expectedHarvestDate);
            
            // 计算生长天数
            const plantedDate = new Date(plant.plantedDate);
            const growingDays = calculateGrowingDays(plantedDate, now);
            
            // 如果已经到了预计收获日期或生长天数超过30天，认为可收获
            return expectedHarvestDate <= now || growingDays >= 30;
        }
        
        // 计算生长天数
        function calculateGrowingDays(plantedDate, currentDate) {
            const diffTime = Math.abs(currentDate - plantedDate);
            const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
            return diffDays;
        }
        
        // 清除所有数据
        function clearAllData() {
            try {
                // 清除localStorage中的所有种植相关数据
                localStorage.removeItem('plantedPlants');
                localStorage.removeItem('plantLogs');
                localStorage.removeItem('plants');
                localStorage.removeItem('plantLogs');
                localStorage.removeItem('tasks');
                
                // 更新UI显示
                updateStatsData();
                
                // 显示成功提示
                showToast('数据已成功清除');
            } catch (error) {
                console.error('清除数据失败:', error);
                showToast('清除数据失败，请重试');
            }
        }
        
        // 显示提示消息
        function showToast(message) {
            const toast = document.getElementById('toastMessage');
            const toastText = document.getElementById('toastText');
            
            toastText.textContent = message;
            toast.classList.remove('hidden');
            
            // 3秒后自动隐藏
            setTimeout(() => {
                toast.classList.add('hidden');
            }, 3000);
        }
    </script>
</body>
</html>